<template>
	<view class="cell-wrap">
		<view class="cell-item" v-for="(item,index) in serviceList">
			<!-- 上 -->
			<view class="item-title">
				<h5>{{item.name}}</h5>
				<view class="price">
					￥<span>{{item.price}}</span>元
				</view>
			</view>
			<!-- 中 -->
			<view class="item-des">
				<view class="">
					好评率：80%
				</view>
				<view class="">
					已服务：50单
				</view>
				<view class="">
					服务时长：90min
				</view>
			</view>
			<!-- 下 -->
			<view class="item-btn">
				<view class="bottom">下架</view>
				<view class="bottom">编辑</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serviceList: [{
						name: '中式按摩中式按摩中式按摩中式按摩中式按摩中式按摩',
						servered: 50,
						serviceTime: 90,
						price: 298,
						goodRate: 80,
						status: 0 //0---上架；1----编辑；2----2下架
					},
					{
						name: '中式按摩',
						servered: 50,
						serviceTime: 90,
						price: 298,
						goodRate: 80,
						status: '1,2' //0---上架；1----编辑；2----2下架
					},
					{
						name: '中式按摩',
						servered: 50,
						serviceTime: 90,
						price: 298,
						goodRate: 80,
						status: '1,2' //0---上架；1----编辑；2----2下架
					},
					{
						name: '中式按摩',
						servered: 50,
						serviceTime: 90,
						price: 298,
						goodRate: 80,
						status: '1,2' //0---上架；1----编辑；2----2下架
					},
					{
						name: '中式按摩',
						servered: 50,
						serviceTime: 90,
						price: 298,
						goodRate: 80,
						status: '1,2' //0---上架；1----编辑；2----2下架
					}
				]
			}
		}
	}
</script>

<style lang='scss' scoped>
	page{
		background-color: #ffffff;
	}
	.cell-wrap{
		width: 100vw;
		color: #999;
		padding-bottom: 160rpx;
	}
	.cell-item {
		width: 96%;
		height: 260rpx;
		margin: 0 auto;
		margin-top: 48rpx;
		background: linear-gradient(to left, #fff, #FBEAD8);
		border-radius: 20rpx;
		box-shadow: -2px 0px 10px 2px #ede6e1; 
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.item-title {
			display: flex;
			justify-content: space-between;
			line-height: 80rpx;
			
			h5{
				width: 78%;
				font-size: 42rpx;
				color: #333;
				overflow: hidden;            // 溢出隐藏
				text-overflow: ellipsis;      // 溢出用省略号显示
				white-space: nowrap;         // 规定段落中的文本不进行换行
			}
			.price{
				color: #EB8E32;
				span{
					font-size: 42rpx;
				}
			}
		}

		.item-des {
			display: flex;
			justify-content: space-between;
		}
		.item-btn{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			line-height: 60rpx;
			flex: 1;
			.bottom{
				padding:0 24rpx;
				margin-left: 20rpx;
				border: 1px solid #F2B674;
				border-radius: 8rpx;
				box-sizing: border-box;
				color: #E7B986;
			}
		}
	}
</style>